{$layout}
{$template "/datepicker"}

<div class="ui text menu blue small">
	<a href="/agents/groups" class="item active">分组</a>
</div>

<div class="ui divider"></div>

<h3>添加分组</h3>

<form class="ui form" data-tea-action="$" data-tea-success="submitSuccess">
	<table class="ui table selectable definition">
		<tr>
			<td class="title">分组名称</td>
			<td>
				<input type="text" name="name" maxlength="200"/>
			</td>
		</tr>
		<tr>
			<td colspan="2"><a href="" style="font-weight: normal" @click.prevent="showAdvanced()">更多选项 <i class="icon angle down"></i> </a></td>
		</tr>
		<tbody v-show="advancedOptionsVisible">
			<tr>
				<td>Agent数量限制</td>
				<td>
					<input type="text" name="maxAgents" value="0" maxlength="8" style="width:10em"/>
					<p class="comment">超出此限制则不能再添加新的Agent。0表示不限制。</p>
				</td>
			</tr>
			<tr>
				<td>开始生效日期</td>
				<td>
					<input type="text" name="dayFrom" id="day-from-input" style="width:8em" autocomplete="off"/>
					<p class="comment">非必填信息。</p>
				</td>
			</tr>
			<tr>
				<td>失效日期</td>
				<td>
					<input type="text" name="dayTo" id="day-to-input" style="width:8em" autocomplete="off"/>
					<p class="comment">该日期结束后，不能再添加或注册新的Agent。非必填信息。</p>
				</td>
			</tr>
			<tr>
				<td>临时密钥</td>
				<td>
					<agent-group-keys :keys="[]"></agent-group-keys>
				</td>
			</tr>
		</tbody>
	</table>

	<button class="ui button primary" type="submit">保存</button> &nbsp; <a href="/agents/groups" v-if="from.length == 0">返回</a><a :href="from" v-if="from.length > 0">返回</a>
</form>